import Taro, { Component } from '@tarojs/taro'
import { View, Text, Canvas } from '@tarojs/components'
import './projectstatistics.css'
import app from '../../../../main.js'
// import reactMixin from 'react-mixin';
// import myJs from '../../pages/projectstatistics/projectstatisticsjs.js'

export default class ProjectStatistics extends Component {

  config = {
    navigationBarTitleText: '项目统计'
  }
  constructor(){
    super(...arguments);
    this.state={
      height:'',
      width:'',
      canvas:'',
    }
  }
  // constructor () { 
  //       super(...arguments); 
  //       this.state = this.getData(); 
  //   }
  arr = [
    {
      "x": "1",
      "y": "24"
    },
    {
      "x": "2",
      "y": "26"
    },
    {
      "x": "3",
      "y": "49"
    },
    {
      "x": "4",
      "y": "60"
    },
    {
      "x": "5",
      "y": "37"
    }, {
      "x": "6",
      "y": "47"
    }, {
      "x": "7",
      "y": "24"
    }, {
      "x": "8",
      "y": "50"
    }
  ];
  arr2 = [
    {
      "x": "1",
      "y": "33"
    },
    {
      "x": "2",
      "y": "26"
    },
    {
      "x": "3",
      "y": "52"
    },
    {
      "x": "4",
      "y": "17"
    },
    {
      "x": "5",
      "y": "10"
    }, {
      "x": "6",
      "y": "47"
    }, {
      "x": "7",
      "y": "26"
    }, {
      "x": "8",
      "y": "40"
    }
  ];
  arr3 = [
    {
      "x": "1",
      "y": "38"
    },
    {
      "x": "2",
      "y": "40"
    },
    {
      "x": "3",
      "y": "25"
    },
    {
      "x": "4",
      "y": "9.6"
    },
    {
      "x": "5",
      "y": "7.3"
    }, {
      "x": "6",
      "y": "24"
    }, {
      "x": "7",
      "y": "34"
    }, {
      "x": "8",
      "y": "35"
    }, {
      "x": "9",
      "y": "66"
    }
  ];

  /*参数 图形参数：初始的x坐标，初始的y坐标，x轴的长度，x轴画图的实际长度，y轴画图的实际长度，y轴的最小值，y轴的最大值,y轴的值的间隔，
         图形类型，折线或曲线
        canvasid，
        颜色数组，
        数组，数组，数组
  */
  draw = (graphParams, graphType, canvasId, colors, ...array) => {
    let ctx = Taro.createCanvasContext(canvasId, this.$scope),
      // 初始的x坐标
      initX = graphParams.initX,
      // 初始的y坐标
      initY = graphParams.initY,
      // x轴的长度
      xLen = graphParams.xLen,
      // x轴画图的实际长度
      xRealLen = graphParams.xRealLen,
      // y轴画图的实际长度
      yRealLen = graphParams.yRealLen,
      // y轴的最小值
      yMin = graphParams.yMin,
      // y轴的最大值
      yMax = graphParams.yMax,
      // y轴的值的间隔
      itervalValue = graphParams.intervalValue,
      // y轴的格子数目
      yTabNum = 0,
      // x轴的格子数目
      xTabNum = 0;

    //计算y轴的最大值，最小值，格子数
    countYData();
    function countYData() {
      //求出传来的数组的最大值和最小值
      for (let arr of array) {
        let count = 0;
        for (let obj of arr) {
          count++;
          parseFloat(obj["y"]) > yMax ? yMax = obj["y"] : yMax;
          parseFloat(obj["y"]) < yMin ? yMin = obj["y"] : yMin;
        }
      }
      //处理最大值和最小值，使得值是y轴的间隔值的倍数。
      yMax % itervalValue === 0 ? yMax : yMax = yMax - yMax % itervalValue + itervalValue;
      if (yMin < 0) {
        yMin = yMin - yMin % itervalValue - itervalValue;
      } else {
        yMin = yMin - yMin % itervalValue;
      }
      //用处理过的最大最小值和间隔求出y轴的格子数目
      yTabNum = (yMax - yMin) / itervalValue;
    }

    //计算x轴需要多少格
    countXTabNum();
    function countXTabNum() {
      for (let arr of array) {
        let count = 0;
        for (let obj of arr) {
          count++;
        }
        count > xTabNum ? xTabNum = count : xTabNum;
      }
    }
    //画x轴
    paintX();
    function paintX() {
      let xTabLen = xRealLen / xTabNum,
        count = 0,
        nowY = initY;
      //判断x的轴的位置是否需要改变，如果只有整数或者负数则不需要，若正负都有则要改变x的轴的位置
      if (yMax > 0 && yMin < 0) {
        nowY = initY - ((0 - yMin) / (yMax - yMin)) * yRealLen;
      }
      ctx.beginPath();
      ctx.moveTo(initX, nowY);
      ctx.lineTo(initX + xLen, nowY);
      ctx.setStrokeStyle("#cacaca");
      ctx.stroke();
      for (let arr of array) {
        for (let obj of arr) {
          count++;
          ctx.beginPath();
          ctx.lineTo(count * xTabLen + initX, nowY);
          ctx.lineTo(count * xTabLen + initX, nowY + 5);
          ctx.setFontSize(14);
          ctx.fillText(obj["x"], count * xTabLen + initX - 4, nowY + 25);
          ctx.setStrokeStyle("#cacaca");
          ctx.stroke();
        }
      }
    }
    //画y轴，和y轴延伸出去的虚线
    paintY();
    function paintY() {
      let yTabLen = yRealLen / yTabNum,
        yNoPaint = initY;
      //判哪一条虚线位置和x轴重合，就不用画
      if (yMax > 0 && yMin < 0) {
        yNoPaint = initY - ((0 - yMin) / (yMax - yMin)) * yRealLen;
      }
      for (let i = 0; i <= yTabNum; i++) {
        if (initY - yTabLen * i !== yNoPaint) {
          ctx.beginPath();
          ctx.setLineDash([2, 5]);
          ctx.lineTo(initX, initY - yTabLen * i);
          ctx.lineTo(initX + xLen, initY - yTabLen * i);
          ctx.stroke();
        }
        ctx.setLineDash([]);
        ctx.setFontSize(14);
        ctx.fillText(yMin + i * itervalValue, initX*0.6 , initY - yTabLen * i + 5);
      }
    }

    //计算x，y轴的真实坐标,和画点
    function countX(xTab) {
      let xTabLen = xRealLen / xTabNum;
      return xTab * xTabLen + initX;
    }
    function countY(yVal) {
      return initY - ((yVal - yMin) / (yMax - yMin)) * yRealLen;
    }
    function paintPoint(x,y,color){
      ctx.beginPath();
      ctx.arc(x, y, 4, Math.PI / 180 * 0, Math.PI / 180 * 360); 
      ctx.setFillStyle('#a8d0ff');
      ctx.fill();
      ctx.beginPath();
      ctx.arc(x, y, 2, Math.PI / 180 * 0, Math.PI / 180 * 360);
      ctx.setFillStyle(color);
      ctx.fill();
    }
    //画点连线
    paintLine();
    function paintLine() {
      let count=0;
      for (let arr of array) {
        let arrLen = arr.length,
        //根据不同的数组给不同的颜色
            color=colors[count];
        for (let i = 1; i <= arrLen; i++) {
          //无论曲线直线，先画一次点，主要为了取最后一个点
          let x = countX(i),
          y = countY(arr[i - 1]["y"]);
          paintPoint(x,y,color);    
          //若为直线，则画直线
          if (graphType === 'line') {
            if (i !== arrLen) {
              ctx.beginPath();
              ctx.setLineWidth(2);
              ctx.lineTo(x, y);
              ctx.lineTo(countX(i + 1), countY(arr[i]["y"]));
              ctx.setStrokeStyle(color);
              ctx.stroke();
              //在画一次点，把线给压住
              paintPoint(x,y,color);
            }
            //若为曲线，则画曲线
          } else if (graphType === 'curve') {
            if (i === arrLen) { continue; }
            //曲线使用canvas的贝塞尔三次曲线，每次都取4个点，分别当前点，前一个点，后两个点。才能计算出两个控制点
            //在第一点和倒数第二点时候需要不一样的计算公式
            let x1, y1, x2, y2, x3, y3, x4, y4;
            x1 = countX(i);
            y1 = countY(arr[i - 1]["y"]);
            x4 = countX(i + 1);
            y4 = countY(arr[i]["y"]);
            if (i === 1) {
              x2 = x1 + (x4 - x1) / 4;
              y2 = y1 + (y4 - y1) / 4;
              x3 = x4 - (countX(i + 2) - x1) / 4;
              y3 = y4 - (countY(arr[i + 1]["y"]) - y1);
            } else if (i === arr.length - 1) {
              x2 = x1 + (x4 - countX(i - 1)) / 4;
              y2 = y1 + (y4 - countY(arr[i - 2]["y"])) / 4;
              x3 = x4 - (x4 - x1) / 4;
              y3 = y4 - (y4 - y1);
            } else {
              x2 = x1 + (x4 - countX(i - 1)) / 4;
              y2 = y1 + (y4 - countY(arr[i - 2]["y"])) / 4;
              x3 = x4 - (countX(i + 2) - x1) / 4;
              y3 = y4 - (countY(arr[i + 1]["y"]) - y1);
            }
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.bezierCurveTo(x2, y2, x3, y3, x4, y4);
            ctx.setStrokeStyle(color);
            ctx.stroke();
            //在画一次点，把线给压住
            paintPoint(x,y,color);
          }
        }
        count++;
      }
    }
    ctx.draw();
  }
  getScreen=()=>{
    Taro.getSystemInfo({
      success: res => {
        this.setState({
          height:res.windowHeight,
          width:res.windowWidth,
          canvas:"height:"+res.windowHeight*0.58+"px;width:100%;"
        })
      }
    })
  }


  componentWillMount() {
    this.getScreen();
  }

  componentDidMount() {
    console.log(this.state.height);
    console.log(this.state.width);
    /*参数 图形参数：初始的x坐标，初始的y坐标，x轴的长度，x轴画图的实际长度，y轴画图的实际长度，y轴的最小值，y轴的最大值,y轴的值的间隔，
         图形类型，折线或曲线
        canvasid，
        颜色数组，
        数组，数组，数组
  */
    this.draw(
      {
        initX: this.state.width*0.12,
        initY: this.state.height*0.5,
        xLen: this.state.width*0.80,
        xRealLen: this.state.width*0.75,
        yRealLen: this.state.height*0.45,
        yMin: 0,
        yMax: 0,
        intervalValue:20
      },
      "curve",
      "canvas",
      ["#3790f7"],
       this.arr3
        );
   }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className='project-statistics'>
        <View className='statistics'>
          <View className='title'>患者年龄分布</View>
          <View className='at-row at-row__justify--around data'>
            <View className='at-col'><View className='text num'>23</View><View className='text'>最低</View></View>
            <View className='at-col'><View className='text num'>45</View><View className='text'>最高</View></View>
            <View className='at-col'><View className='text num'>34</View><View className='text'>平均</View></View>
          </View>
          <Canvas className='paint' style={this.state.canvas} canvasId='canvas' />
        </View>


        {/* <View className='statistics'>
          <View className='title'>术前DS/DC视力分布</View>
          <View className='at-row at-row__justify--around data2'>
            <View className='at-col'><View className='text '><Text className='blue'>-20.13/</Text><Text className='green'>-2.67</Text></View><View className='text limt'>最低</View></View>
            <View className='at-col'><View className='text '><Text className='blue'>-10/</Text><Text className='green'>-1.0</Text></View><View className='text limt'>最高</View></View>
            <View className='at-col'><View className='text '><Text className='blue'>-24.75/</Text><Text className='green'>-6.5</Text></View><View className='text limt'>平均</View></View>
          </View>

          <Canvas className='paint' style={this.state.canvas} canvasId='canvasSecond' />
        </View> */}
        <View className='you'>
        </View>
      </View>
    )
  }
}
// reactMixin.onClass(ProjectStatistics,myJs);
